<template>
  <div id="cesium-container">
    <slot />
  </div>
</template>

<script setup>
import * as Cesium from 'cesium';
import { onMounted } from 'vue';
import { initViewer, setScene, flyToDefaultView } from '@/cesiumTools/cesiumInit';
import { useCesiumStore } from '@/stores/cesiumStore';

const cesiumStore = useCesiumStore();

//初始化cesium实例
Cesium.Ion.defaultAccessToken =
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI1ZjE2OTYzNy0xNmQyLTQyNzYtOWEwNy03NmJlN2ZhMTkyZmQiLCJpZCI6MjU4MzQyLCJpYXQiOjE3MzI2OTMxMjN9.udnGjfBfpfqp9OEg8HBsOtA01aLgOcR0Kvo3acnJrMw';

onMounted(async () => {
  // 创建 viewer
  const viewer = initViewer('cesium-container');

  setScene(viewer);
  // flyToDefaultView(viewer)

  // 存储 viewer 到全局 store
  cesiumStore.setViewer(viewer);

  // 在其他组件中可以这样获取 viewer
  // const cesiumStore = useCesiumStore();
  // const viewer = cesiumStore.viewer; 或 cesiumStore.getViewer
});
</script>
<style>
#cesium-container {
  width: 100%;
  height: 100%;
  pointer-events: all;
}
</style>
